<template>
	<div class="greet">
		<img class="icon" src="../assets/sun.png" alt="" />
		欢迎登录~打工人~
	</div>
	<el-row class="row">
		<el-col :xs="24" :sm="24" :md="12" :lg="12">
			<div class="crad1">
				<PancePie />
			</div>
		</el-col>
		<el-col :xs="24" :sm="24" :md="24" :lg="24">
			<div class="card" style=" height: 400px;width: 98%;">
				<PancelPictorialBar />
			</div>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
	import PancelPictorialBar from "../components/welcome/PanceIPictorialBar.vue";
	import PancePie from "../components/welcome/PancePie.vue";
</script>
<style scoped>
	.card {
		height: 400px;
		border-radius: 20px;
		margin: 10px 10px 10px 12px;
	}

	.row {
		background-color: rgba(245, 247, 250);
		width: 100%;
		height:100%;
	}

	.crad1 {
		height: 300px;
		width: 48%px;
		margin-left: 10px;
		margin-top: 10px;
		background-color: white;
	}

	.greet {
		text-align: left;
		display: flex;
		.icon {
			width: 30px;
			height: 30px;
			animation: iconLoading infinite 3s linear;
		}
	}

	@keyframes iconLoading {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>